import '@antv/x6';
import { Graph,Dom,Shape,Addon } from '@antv/x6';
// 拖拽生成图形 四边形或者圆形或者菱形等
export const startDragToGraph = (graph,type,e)=> {
    let node;
    // 矩形节点
    if(type === 'Rect') {
        // 创建节点
        node = graph.createNode({
            width:100,
            height:60,
            attrs: {
                label: {
                    text: '矩形节点',
                    fill: '#000000',
                    fontSize: 14,
                    textWrap: {
                      width: -10,
                      height: -10,
                      ellipsis: true,
                    },
                },
                body: {
                    stroke: '#000000',
                    strokeWidth: 1,
                    fill: '#ffffff',
                },
            },
            ports: ports
        }) 
    }
    // 圆形节点
    if(type === 'Circle') {
        node = graph.createNode({
            shape: 'circle',
            width:100,
            height:100,
            attrs: {
                label: {
                    text: '圆形节点',
                    fill: '#000000',
                    fontSize: 14,
                    textWrap: {
                      width: -20,
                      height: -10,
                      ellipsis: true,
                    },
                },
                body: {
                    stroke: '#000000',
                    strokeWidth: 1,
                    fill: '#ffffff',
                },
            },
            ports: ports
        }) 
    }
    // 条件节点
    if(type === 'polygon') {
        node = graph.createNode({
            shape: 'polygon',
            // x: 40,
            // y: 40,
            width: 120,
            height: 120,
            attrs: {
              label: {
                text: '条件节点',
                fill: '#000000',
                fontSize: 14,
                textWrap: {
                  width: -50,
                  height: '70%',
                  ellipsis: true,
                },
              },
              body: {
                fill: '#ffffff',
                stroke: '#000000',
                refPoints: '0,10 10,0 20,10 10,20',
                strokeWidth: 1,
              },
            },
            ports: ports
        })
    }
    // 变电站
    if(type === 'bdz') {
        node = graph.createNode({shape: 'bdz-image-node'})
    }
    const dnd = new Addon.Dnd({target:graph})
    dnd.start(node,e);
}
// 链接桩配置
const ports = {
    groups: { // 链接桩组定义
        // 输入链接桩群组定义
        top: {
            position: 'top',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
            },
        },
        // 输出链接桩群组定义
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
            },
        },
        left: {
            position: 'left',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
            },
        },
        right: {
            position: 'right',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
            },
        },
    }, 
    items: [    // 链接桩
        {
            id: 'port1',
            group: 'top',
        },
        {
            id: 'port2',
            group: 'bottom',
        },
        {
            id: 'port3',
            group: 'left',
        },
        {
            id: 'port4',
            group: 'right',
        } 
    ], 
}
// 自定义变电站节点
Graph.registerNode('bdz-image-node',{
    width: 80,
    height: 80,
    attrs: {
        body: {
            width: 80,
            height: 80,
            fill: 'rgba(95,149,255,0)', //设置透明背景色(颜色无所谓)
        },
        image: {
            'xlink:href': require('../../assets/bdz.png'),//本地图片
            width: 60,
            height: 60,
            x: 10,
            y: 5,
        },
        title: {
            text: '变电站',
            refX: 22,
            refY: 65,
            fill: 'rgba(0,0,0,0.85)',
            fontSize: 12,
            'text-anchor': 'start',
        }
    },
    markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
          selector: 'image',
        },
        {
          tagName: 'text',
          selector: 'title',
        },
    ],
    ports: ports,
},true)

